<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import 'echarts-gl'
import {
  getAllUserCountSync,
  getArticlesCountSync,
  getCommentsCountSync,
  countIPAddressSync,
  getIpAddressListByDateSync,
  getIpAddressListByMonthSync,
  getIpAddressListByYearSync,
  getCommentlikesCountSync,
  getIpAddressListByCitySync
} from '@/api/manage/index.ts'

// 数据统计
const userCount = ref(0)
const articleCount = ref(0)
const commentCount = ref(0)
const visitCount = ref(0)
const likeCount = ref(0)

// 图表实例
const dailyTrend = ref(null)
const monthlyTrend = ref(null)
const yearlyTrend = ref(null)
const cityVisits = ref(null)
const statsOverview = ref(null)
const userGrowth = ref(null)

// 初始化数据
const initData = async () => {
  try {
    // 获取基础统计数据
    const userRes = await getAllUserCountSync()
    const articleRes = await getArticlesCountSync()
    const commentRes = await getCommentsCountSync()
    const visitRes = await countIPAddressSync()
    const likeRes = await getCommentlikesCountSync()

    userCount.value = userRes.data.count || 0
    articleCount.value = articleRes.data.totalArticles || 0
    commentCount.value = commentRes.data.totalComments || 0
    visitCount.value = visitRes.data.data || 0
    likeCount.value = likeRes.data.count || 0

    // 初始化图表
    initCharts()
  } catch (error) {
    console.error('数据加载失败:', error)
  }
}

// 初始化所有图表
const initCharts = async () => {
  // 获取趋势数据
  const [dateData, monthData, yearData, cityData] = await Promise.all([
    getIpAddressListByDateSync(),
    getIpAddressListByMonthSync(),
    getIpAddressListByYearSync(),
    getIpAddressListByCitySync()
  ])

  // 初始化各个图表
  initDailyTrendChart(dateData.data || [])
  initMonthlyTrendChart(monthData.data || [])
  initYearlyTrendChart(yearData.data || [])
  initCityVisitsChart(cityData.data || [])
  initStatsOverviewChart()
  initUserGrowthChart()
}

// 日趋势图表
const initDailyTrendChart = (data) => {
  
  const chartDom = dailyTrend.value
  if (!chartDom) return
  
  const myChart = echarts.init(chartDom)
  
  // 处理数据
  const dates = data.map(item => item.date || '')
  const counts = data.map(item => item.total_count || 0)
  const option = {
    title: {
      text: '日访问量趋势',
      textStyle: {
        color: '#2ecc71',
        fontFamily: 'Orbitron, sans-serif',
        fontSize: 16,
        fontWeight: 'normal',
        textShadow: '0 0 10px rgba(46, 204, 113, 0.7)'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        shadowStyle: {
          color: 'rgba(46, 204, 113, 0.2)'
        }
      },
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      borderColor: '#2ecc71',
      borderWidth: 1,
      textStyle: {
        color: '#27ae60',
        fontFamily: 'Courier New, monospace'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: dates,
      axisLabel: {
        color: '#34495e',
        rotate: 45,
        fontFamily: 'Courier New, monospace'
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(46, 204, 113, 0.3)'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(46, 204, 113, 0.1)',
          type: 'dashed'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#34495e',
        fontFamily: 'Courier New, monospace'
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(46, 204, 113, 0.3)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(46, 204, 113, 0.1)',
          type: 'dashed'
        }
      }
    },
    series: [
      {
        name: '访问量',
        type: 'bar',
        data: counts,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#2ecc71' },
            { offset: 0.5, color: '#27ae60' },
            { offset: 1, color: '#1abc9c' }
          ]),
          borderRadius: [5, 5, 0, 0],
          shadowColor: 'rgba(46, 204, 113, 0.5)',
          shadowBlur: 10
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#2ecc71' },
              { offset: 0.7, color: '#27ae60' },
              { offset: 1, color: '#1abc9c' }
            ]),
            shadowColor: 'rgba(46, 204, 113, 0.8)',
            shadowBlur: 20
          }
        },
        barWidth: '60%',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(240, 250, 240, 0.5)'
        }
      }
    ],
    backgroundColor: 'transparent',
    textStyle: {
      color: '#2ecc71'
    }
  }
  
  myChart.setOption(option)
  window.addEventListener('resize', () => myChart.resize())
}

// 月趋势图表
const initMonthlyTrendChart = (data) => {
  const chartDom = monthlyTrend.value
  if (!chartDom) return
  
  const myChart = echarts.init(chartDom)
  
  // 处理数据
  const months = data.map(item => item.data || '')
  const counts = data.map(item => item.total_count || 0)
  
  const option = {
    title: {
      text: '月访问量趋势',
      textStyle: {
        color: '#e67e22',
        fontFamily: 'Orbitron, sans-serif',
        fontSize: 16,
        fontWeight: 'normal',
        textShadow: '0 0 10px rgba(230, 126, 34, 0.7)'
      }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      borderColor: '#e67e22',
      borderWidth: 1,
      textStyle: {
        color: '#d35400',
        fontFamily: 'Courier New, monospace'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: months,
      axisLabel: {
        color: '#34495e',
        fontFamily: 'Courier New, monospace'
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(230, 126, 34, 0.3)'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(230, 126, 34, 0.1)',
          type: 'dashed'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#34495e',
        fontFamily: 'Courier New, monospace'
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(230, 126, 34, 0.3)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(230, 126, 34, 0.1)',
          type: 'dashed'
        }
      }
    },
    series: [
      {
        name: '访问量',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 3,
          color: '#e67e22',
          shadowColor: 'rgba(230, 126, 34, 0.3)',
          shadowBlur: 5
        },
        showSymbol: true,
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: '#e67e22',
          borderColor: '#fff',
          borderWidth: 2
        },
        areaStyle: {
          opacity: 0.3,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(230, 126, 34, 0.5)' },
            { offset: 1, color: 'rgba(230, 126, 34, 0.05)' }
          ])
        },
        emphasis: {
          focus: 'series',
          itemStyle: {
            color: '#d35400',
            borderColor: '#fff',
            borderWidth: 3,
            shadowColor: 'rgba(230, 126, 34, 0.5)',
            shadowBlur: 10
          }
        },
        data: counts
      }
    ],
    backgroundColor: 'transparent',
    textStyle: {
      color: '#e67e22'
    }
  }
  
  myChart.setOption(option)
  window.addEventListener('resize', () => myChart.resize())
}

// 年趋势图表
const initYearlyTrendChart = (data) => {
  const chartDom = yearlyTrend.value
  if (!chartDom) return
  
  const myChart = echarts.init(chartDom)
  
  // 处理数据
  const years = data.map(item => item.data || '')
  const counts = data.map(item => item.total_count || 0)
  
  const option = {
    title: {
      text: '年访问量趋势',
      textStyle: {
        color: '#e74c3c',
        fontFamily: 'Orbitron, sans-serif',
        fontSize: 16,
        fontWeight: 'normal',
        textShadow: '0 0 10px rgba(231, 76, 60, 0.7)'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#e74c3c'
        }
      },
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      borderColor: '#e74c3c',
      borderWidth: 1,
      textStyle: {
        color: '#c0392b',
        fontFamily: 'Courier New, monospace'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: years,
      axisPointer: {
        type: 'shadow'
      },
      axisLabel: {
        color: '#34495e',
        fontFamily: 'Courier New, monospace'
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(231, 76, 60, 0.3)'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(231, 76, 60, 0.1)',
          type: 'dashed'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#34495e',
        fontFamily: 'Courier New, monospace'
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(231, 76, 60, 0.3)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(231, 76, 60, 0.1)',
          type: 'dashed'
        }
      }
    },
    series: [
      {
        name: '访问量',
        type: 'bar',
        barWidth: '60%',
        data: counts,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#e74c3c' },
            { offset: 0.5, color: '#c0392b' },
            { offset: 1, color: '#d35400' }
          ]),
          borderRadius: [5, 5, 0, 0]
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#c0392b' },
              { offset: 0.5, color: '#e74c3c' },
              { offset: 1, color: '#d35400' }
            ])
          }
        }
      }
    ],
    backgroundColor: 'transparent',
    textStyle: {
      color: '#e74c3c'
    }
  }
  
  myChart.setOption(option)
  window.addEventListener('resize', () => myChart.resize())
}

// 城市访问图表
const initCityVisitsChart = (data) => {
  const chartDom = cityVisits.value
  if (!chartDom) return
  
  const myChart = echarts.init(chartDom)
  
  // 处理数据 - 限制显示城市数量，避免重叠
  // 对数据按访问量排序
  const sortedData = [...data].sort((a, b) => (b.total_count || 0) - (a.total_count || 0))
  
  // 只显示前8个城市，其余归为"其他"
  const maxCities = 8
  let processedData = []
  
  if (sortedData.length > maxCities) {
    // 取前N个城市
    const topCities = sortedData.slice(0, maxCities)
    
    // 计算其他城市的总和
    const otherCities = sortedData.slice(maxCities)
    const otherTotal = otherCities.reduce((sum, item) => sum + (parseInt(item.total_count) || 0), 0)
    
    // 合并数据
    processedData = [
      ...topCities,
      { province: '其他地区', total_count: otherTotal }
    ]
  } else {
    processedData = sortedData
  }
  
  const cities = processedData.map(item => item.province || '未知')
  const counts = processedData.map(item => item.total_count || 0)
  
  const option = {
    title: {
      text: '城市访问分布',
      textStyle: {
        color: '#9b59b6',
        fontFamily: 'Orbitron, sans-serif',
        fontSize: 16,
        fontWeight: 'normal',
        textShadow: '0 0 10px rgba(155, 89, 182, 0.7)'
      }
    },
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      borderColor: '#9b59b6',
      borderWidth: 1,
      textStyle: {
        color: '#8e44ad',
        fontFamily: 'Courier New, monospace'
      }
    },
    legend: {
      type: 'scroll',
      orient: 'vertical',
      right: '5%',
      top: 'center',
      textStyle: {
        color: '#34495e',
        fontFamily: 'Courier New, monospace'
      },
      itemStyle: {
        borderColor: '#9b59b6'
      },
      pageTextStyle: {
        color: '#34495e'
      },
      pageIconColor: '#9b59b6',
      pageIconInactiveColor: 'rgba(155, 89, 182, 0.3)',
      formatter: function(name) {
        // 限制图例文本长度
        return name.length > 6 ? name.slice(0, 6) + '...' : name;
      }
    },
    series: [
      {
        name: '访问量',
        type: 'pie',
        radius: ['40%', '65%'],
        center: ['40%', '50%'],  // 将饼图向左移动，为图例腾出空间
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 5,
          borderColor: '#fff',
          borderWidth: 2,
          shadowBlur: 15,
          shadowColor: 'rgba(155, 89, 182, 0.5)'
        },
        label: {
          show: false,
          position: 'center',
          formatter: '{b}: {c} ({d}%)'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'bold',
            color: '#9b59b6',
            fontFamily: 'Orbitron, sans-serif',
            textShadow: '0 0 10px rgba(155, 89, 182, 0.7)'
          },
          itemStyle: {
            shadowBlur: 25,
            shadowColor: 'rgba(155, 89, 182, 0.8)'
          }
        },
        labelLine: {
          show: false,
          length: 10,
          length2: 10
        },
        data: cities.map((city, index) => ({
          value: counts[index],
          name: city,
          itemStyle: {
            color: index % 2 === 0 ? 
              new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#9b59b6' },
                { offset: 1, color: '#8e44ad' }
              ]) : 
              new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#8e44ad' },
                { offset: 1, color: '#9b59b6' }
              ])
          }
        })),
      }
    ],
    backgroundColor: 'transparent',
    textStyle: {
      color: '#9b59b6'
    }
  }
  
  myChart.setOption(option)
  window.addEventListener('resize', () => myChart.resize())
}

// 统计概览图表
const initStatsOverviewChart = () => {
  const chartDom = statsOverview.value
  if (!chartDom) return
  
  const myChart = echarts.init(chartDom)
  
  const option = {
    title: {
      text: '网站数据概览',
      textStyle: {
        color: '#16a085',
        fontFamily: 'Orbitron, sans-serif',
        fontSize: 16,
        fontWeight: 'normal',
        textShadow: '0 0 10px rgba(22, 160, 133, 0.7)'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      borderColor: '#16a085',
      borderWidth: 1,
      textStyle: {
        color: '#16a085',
        fontFamily: 'Courier New, monospace'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['文章', '评论', '用户', '访问', '点赞'],
      axisLabel: {
        color: '#34495e',
        fontFamily: 'Courier New, monospace'
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(22, 160, 133, 0.3)'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(22, 160, 133, 0.1)',
          type: 'dashed'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#34495e',
        fontFamily: 'Courier New, monospace'
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(22, 160, 133, 0.3)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(22, 160, 133, 0.1)',
          type: 'dashed'
        }
      }
    },
    series: [
      {
        name: '数量',
        type: 'bar',
        data: [
          { value: articleCount.value, itemStyle: { color: '#1abc9c', borderRadius: [5, 5, 0, 0] } },
          { value: commentCount.value, itemStyle: { color: '#16a085', borderRadius: [5, 5, 0, 0] } },
          { value: userCount.value, itemStyle: { color: '#1abc9c', borderRadius: [5, 5, 0, 0] } },
          { value: visitCount.value, itemStyle: { color: '#16a085', borderRadius: [5, 5, 0, 0] } },
          { value: likeCount.value, itemStyle: { color: '#1abc9c', borderRadius: [5, 5, 0, 0] } }
        ],
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(240, 240, 250, 0.5)'
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 15,
            shadowColor: 'rgba(22, 160, 133, 0.5)'
          }
        }
      }
    ],
    backgroundColor: 'transparent',
    textStyle: {
      color: '#9b59b6'
    }
  }
  
  myChart.setOption(option)
  window.addEventListener('resize', () => myChart.resize())
}

// 用户增长图表
const initUserGrowthChart = () => {
  const chartDom = userGrowth.value
  if (!chartDom) return
  
  const myChart = echarts.init(chartDom)
  
  // 模拟数据
  const option = {
    title: {
      text: '用户增长趋势',
      textStyle: {
        color: '#f39c12',
        fontFamily: 'Orbitron, sans-serif',
        fontSize: 16,
        fontWeight: 'normal',
        textShadow: '0 0 10px rgba(243, 156, 18, 0.7)'
      }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      borderColor: '#16a085',
      borderWidth: 1,
      textStyle: {
        color: '#16a085',
        fontFamily: 'Courier New, monospace'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisLabel: {
        color: '#34495e',
        fontFamily: 'Courier New, monospace'
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(22, 160, 133, 0.3)'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(22, 160, 133, 0.1)',
          type: 'dashed'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#34495e',
        fontFamily: 'Courier New, monospace'
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(22, 160, 133, 0.3)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(22, 160, 133, 0.1)',
          type: 'dashed'
        }
      }
    },
    series: [
      {
        name: '用户数',
        type: 'line',
        stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 210, 230, 245, 256, 278, 300],
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: '#f39c12',
          borderColor: '#f1c40f',
          borderWidth: 2,
          shadowBlur: 10,
          shadowColor: 'rgba(243, 156, 18, 0.5)'
        },
        lineStyle: {
          color: '#f39c12',
          width: 4,
          shadowColor: 'rgba(243, 156, 18, 0.5)',
          shadowBlur: 15
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(243, 156, 18, 0.8)' },
            { offset: 1, color: 'rgba(255, 255, 255, 0.1)' }
          ])
        },
        emphasis: {
          itemStyle: {
            color: '#f1c40f',
            borderColor: '#f39c12',
            borderWidth: 3,
            shadowBlur: 15,
            shadowColor: 'rgba(241, 196, 15, 0.8)'
          }
        }
      }
    ],
    backgroundColor: 'transparent',
    textStyle: {
      color: '#9b59b6'
    }
  }
  
  myChart.setOption(option)
  window.addEventListener('resize', () => myChart.resize())
}

onMounted(() => {
  initData()
})
</script>

<template>
  <div class="data-screen">
    <!-- 背景动画效果 -->
    <div class="cyber-background">
      <div class="grid-lines"></div>
      <div class="glow-effect"></div>
      <div class="particles"></div>
    </div>
    
    <div class="screen-header">
      <h1>个人博客数据大屏<span class="blink">_</span></h1>
      <div class="time-info">{{ new Date().toLocaleString() }}</div>
    </div>
    
    <div class="data-overview">
      <div class="stat-card" data-aos="fade-up" data-aos-delay="100">
        <div class="stat-icon article-icon">
          <i class="fas fa-file-alt"></i>
        </div>
        <div class="stat-info">
          <div class="stat-title">文章总数</div>
          <div class="stat-value">{{ articleCount }}</div>
          <div class="stat-glow"></div>
        </div>
      </div>
      
      <div class="stat-card" data-aos="fade-up" data-aos-delay="200">
        <div class="stat-icon comment-icon">
          <i class="fas fa-comments"></i>
        </div>
        <div class="stat-info">
          <div class="stat-title">评论总数</div>
          <div class="stat-value">{{ commentCount }}</div>
          <div class="stat-glow"></div>
        </div>
      </div>
      
      <div class="stat-card" data-aos="fade-up" data-aos-delay="300">
        <div class="stat-icon user-icon">
          <i class="fas fa-users"></i>
        </div>
        <div class="stat-info">
          <div class="stat-title">用户总数</div>
          <div class="stat-value">{{ userCount }}</div>
          <div class="stat-glow"></div>
        </div>
      </div>
        
       <div class="stat-card" data-aos="fade-up" data-aos-delay="400">
         <div class="stat-icon visit-icon">
           <i class="fas fa-eye"></i>
         </div>
         <div class="stat-info">
           <div class="stat-title">访问总数</div>
           <div class="stat-value">{{ visitCount }}</div>


         </div>
       </div>
       
       <div class="stat-card">
         <div class="stat-icon like-icon">
           <i class="fas fa-thumbs-up"></i>
         </div>
         <div class="stat-info">
           <div class="stat-title">点赞总数</div>
           <div class="stat-value">{{ likeCount }}</div>
         </div>
       </div>
     </div>
        
    <div class="charts-container">
      <div class="chart-item" ref="statsOverview"></div>
      <div class="chart-item" ref="cityVisits"></div>
      <div class="chart-item" ref="dailyTrend"></div>
      <div class="chart-item" ref="monthlyTrend"></div>
      <div class="chart-item" ref="yearlyTrend"></div>
      <div class="chart-item" ref="userGrowth"></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(46, 204, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

@keyframes glow {
  0% { box-shadow: 0 0 5px rgba(46, 204, 113, 0.5); }
  50% { box-shadow: 0 0 20px rgba(46, 204, 113, 0.8), 0 0 30px rgba(230, 126, 34, 0.6); }
  100% { box-shadow: 0 0 5px rgba(46, 204, 113, 0.5); }
}

@keyframes gridMove {
  0% { background-position: 0 0; }
  100% { background-position: 50px 50px; }
}

@keyframes particleFloat {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-1000px) rotate(720deg); }
}

.data-screen {
  width: 100%;
  min-height: 100vh;
  padding: 20px;
  background-color: #ecf0f1;
  color: #2ecc71;
  position: relative;
  overflow: hidden;
  font-family: 'Orbitron', sans-serif;
  
  // 网格背景
  .cyber-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    
    .grid-lines {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(rgba(46, 204, 113, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(230, 126, 34, 0.1) 1px, transparent 1px);
      background-size: 50px 50px;
      animation: gridMove 15s linear infinite;
      z-index: 1;
    }
    
    .glow-effect {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, rgba(46, 204, 113, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
      z-index: 2;
    }
    
    .particles {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 3;
      
      &:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: radial-gradient(rgba(230, 126, 34, 0.3) 1px, transparent 1px);
        background-size: 30px 30px;
        animation: particleFloat 20s linear infinite;
      }
    }
  }
  
  .screen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    position: relative;
    z-index: 10;
    
    h1 {
      font-size: 32px;
      color: #e74c3c;
      margin: 0;
      font-family: 'Orbitron', sans-serif;
      text-shadow: 0 0 10px rgba(231, 76, 60, 0.7);
      letter-spacing: 2px;
      
      .blink {
        animation: blink 1s infinite;
        color: #c0392b;
      }
    }
    
    .time-info {
      font-size: 16px;
      color: #16a085;
      font-family: 'Courier New', monospace;
      background: rgba(255, 255, 255, 0.85);
      padding: 8px 15px;
      border-radius: 20px;
      border: 1px solid rgba(22, 160, 133, 0.3);
      box-shadow: 0 0 10px rgba(22, 160, 133, 0.3);
    }
  }
  
  .data-overview {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-bottom: 30px;
    position: relative;
    z-index: 10;
    
    .stat-card {
      background: rgba(255, 255, 255, 0.9);
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 0 15px rgba(46, 204, 113, 0.3);
      display: flex;
      align-items: center;
      border: 1px solid rgba(46, 204, 113, 0.3);
      transition: transform 0.3s, box-shadow 0.3s;
      position: relative;
      overflow: hidden;
      animation: float 6s ease-in-out infinite;
      
      &:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 0 25px rgba(46, 204, 113, 0.5);
        
        .stat-glow {
          opacity: 1;
        }
      }
      
      .stat-glow {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle at center, rgba(46, 204, 113, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
        opacity: 0;
        transition: opacity 0.3s;
        z-index: 1;
      }
      
      .stat-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20px;
        position: relative;
        z-index: 2;
        animation: pulse 2s infinite;
        
        i {
          font-size: 24px;
          color: #fff;
        }
        
        &.article-icon {
          background: linear-gradient(135deg, #2ecc71, #27ae60);
        }
        
        &.comment-icon {
          background: linear-gradient(135deg, #e67e22, #d35400);
        }
        
        &.user-icon {
          background: linear-gradient(135deg, #9b59b6, #8e44ad);
        }
        
        &.visit-icon {
          background: linear-gradient(135deg, #e74c3c, #c0392b);
        }
        
        &.like-icon {
          background: linear-gradient(135deg, #f39c12, #f1c40f);
        }
      }
      
      /* 移除旧的图标样式，因为已经在.stat-icon中定义了新样式 */
      
      .stat-info {
        flex: 1;
        position: relative;
        z-index: 2;
      }
      
      .stat-title {
        font-size: 16px;
        color: #34495e;
        margin-bottom: 5px;
        font-family: 'Courier New', monospace;
        letter-spacing: 1px;
        font-weight: 500;
      }
      
      .stat-value {
        font-size: 28px;
        font-weight: bold;
        background: linear-gradient(90deg, #2ecc71, #e74c3c, #9b59b6);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-family: 'Orbitron', sans-serif;
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
    }
  }
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .data-overview {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .data-overview {
    grid-template-columns: 1fr;
  }
  
  .screen-header {
    flex-direction: column;
    align-items: flex-start;
    
    h1 {
      margin-bottom: 15px;
      font-size: 24px;
    }
  }
  
  .charts-container {
    grid-template-columns: 1fr;
    
    .chart-item {
      height: 250px;
    }
  }
}

.charts-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  position: relative;
  z-index: 10;
  
  .chart-item {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    padding: 20px;
    height: 350px;
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.3);
    border: 1px solid rgba(46, 204, 113, 0.3);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    animation: glow 4s infinite;
    
    &:hover {
      transform: translateY(-5px) scale(1.01);
      box-shadow: 0 10px 25px rgba(46, 204, 113, 0.4), 0 6px 12px rgba(230, 126, 34, 0.2);
    }
    
    &:nth-child(odd):hover {
      box-shadow: 0 10px 25px rgba(231, 76, 60, 0.4), 0 6px 12px rgba(155, 89, 182, 0.2);
    }
    
    &:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, #2ecc71, #e67e22, #e74c3c, #9b59b6, #f39c12);
    }
    
    &:hover {
      box-shadow: 0 0 25px rgba(78, 122, 231, 0.5), 0 0 40px rgba(78, 122, 231, 0.3);
    }
  }
}
</style>